<template>
  <div class="tasks-container">
    <div class="task-header">
      <h3>任务列表</h3>
      <el-button type="primary" @click="showAddTaskDialog">添加任务</el-button>
    </div>

    <el-table :data="tasks" style="width: 100%">
      <el-table-column prop="title" label="任务名称" />
      <el-table-column prop="description" label="任务描述" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="editTask(row)"
            :disabled="row.status === 'completed'"
          >
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="deleteTask(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑任务' : '添加任务'" width="500px">
      <el-form :model="taskForm" :rules="rules" ref="taskFormRef">
        <el-form-item label="任务名称" prop="title">
          <el-input v-model="taskForm.title" />
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input v-model="taskForm.description" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="taskForm.status">
            <el-option label="待处理" value="pending" />
            <el-option label="进行中" value="in_progress" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTask">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

interface Task {
  id: number;
  title: string;
  description: string;
  status: string;
}

export default defineComponent({
  name: "TaskList",
  setup() {
    const dialogVisible = ref(false);
    const isEdit = ref(false);
    const taskFormRef = ref();
    const currentTaskId = ref<number | null>(null);

    const tasks = ref<Task[]>([
      {
        id: 1,
        title: "示例任务1",
        description: "这是一个示例任务",
        status: "pending",
      },
    ]);

    const taskForm = reactive({
      title: "",
      description: "",
      status: "pending",
    });

    const rules = {
      title: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
      description: [{ required: true, message: "请输入任务描述", trigger: "blur" }],
      status: [{ required: true, message: "请选择任务状态", trigger: "change" }],
    };

    const getStatusType = (status: string) => {
      switch (status) {
        case "pending":
          return "warning";
        case "in_progress":
          return "primary";
        case "completed":
          return "success";
        default:
          return "info";
      }
    };

    const getStatusText = (status: string) => {
      switch (status) {
        case "pending":
          return "待处理";
        case "in_progress":
          return "进行中";
        case "completed":
          return "已完成";
        default:
          return "未知";
      }
    };

    const showAddTaskDialog = () => {
      isEdit.value = false;
      currentTaskId.value = null;
      taskForm.title = "";
      taskForm.description = "";
      taskForm.status = "pending";
      dialogVisible.value = true;
    };

    const editTask = (task: Task) => {
      isEdit.value = true;
      currentTaskId.value = task.id;
      taskForm.title = task.title;
      taskForm.description = task.description;
      taskForm.status = task.status;
      dialogVisible.value = true;
    };

    const deleteTask = (task: Task) => {
      ElMessageBox.confirm("确定要删除这个任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        tasks.value = tasks.value.filter((t) => t.id !== task.id);
        ElMessage.success("删除成功");
      });
    };

    const saveTask = async () => {
      try {
        await taskFormRef.value.validate();

        if (isEdit.value && currentTaskId.value) {
          // 编辑任务
          const index = tasks.value.findIndex((t) => t.id === currentTaskId.value);
          if (index !== -1) {
            tasks.value[index] = {
              id: currentTaskId.value,
              ...taskForm,
            };
          }
        } else {
          // 添加新任务
          const newId = Math.max(...tasks.value.map((t) => t.id), 0) + 1;
          tasks.value.push({
            id: newId,
            ...taskForm,
          });
        }

        dialogVisible.value = false;
        ElMessage.success(isEdit.value ? "编辑成功" : "添加成功");
      } catch (error) {
        console.error("表单验证失败:", error);
      }
    };

    return {
      dialogVisible,
      isEdit,
      taskFormRef,
      tasks,
      taskForm,
      rules,
      getStatusType,
      getStatusText,
      showAddTaskDialog,
      editTask,
      deleteTask,
      saveTask,
    };
  },
});
</script>

<style lang="scss" scoped>
.tasks-container {
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;

  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>
